@charset "UTF-8";

// ==========================================================================
// Wee – Form
// ==========================================================================

// Form
.form {
  @include padding-all(1em, null, 1em, null);
}

label {
	margin-bottom:5px;
	max-width:100%;
	display:inline-block;
}

.form-item {

}

.form-group {
  ul {padding:0;}
  li {list-style:none;margin-bottom:15px;line-height:30px;}
}

// 水平排列
.form-uniline {
	li {float:left;margin-right:20px;}
}


// 垂直排列
.form-block {
	label {
		margin-right:5px;
		width:100px;
		text-align:right;
	}
}

.form-field {
  padding-left:110px;
}


// Checkbox and Radio
.checkbox,
.radio {
  display: inline-block;
  position: relative;
  @include padding-all(.5em, null, .5em, null);
  label {
    @include padding-all(0, null, null, 20px);
    display: inline-block;
  }
  input[type="checkbox"],
  input[type="radio"] {
    position: absolute;
    top: 4px;
    left: 0;
  }
}

$inputs: 'select,
          textarea,
          input[type="text"],
          input[type="password"],
          input[type="datetime"],
          input[type="datetime-local"],
          input[type="date"],
          input[type="month"],
          input[type="time"],
          input[type="week"],
          input[type="number"],
          input[type="email"],
          input[type="url"],
          input[type="search"],
          input[type="tel"],
          input[type="color"]';


// --- component: inputs ---------------------------------

#{$inputs} {
  width: 200px;
  height: 30px;
  padding: 6px;
  outline: none;
  display: inline-block;
  border: 1px solid #ccc;
  @include border-radius(3px);

  &[disabled] {
    opacity: .35;
    cursor: default;
  }
}

textarea {
  width: 300px;
  height: 150px;
}


// Custom Select
.select {
  border: 1px solid #ccc;
  overflow: hidden;
  height: 36px;
  line-height: 32px;
  padding: 0 .4em;
  position: relative;
  display: block;
  &:before {
    content: "";
    border: 6px solid transparent;
    border-top-color: #676767;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 120%;
    height: 36px;
    padding: 0;
    line-height: normal;
    border: 0;
    background: transparent;
    display: block;
    &:focus { outline: 0; }
  }
}

// Placeholder color
::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }
